<template>
	<view class="content">
		<scroll-view scroll-x="true">
			<view class="nav-box flexWrap">
				<view class="nav-item flexWarpCenterColumn" v-for="(item,index) in navList" :key="index" :class="{active:currmentIndex==index}" @tap="changeNav(index)">
					<text>{{item.name}}</text>
					<text class="line"></text>
				</view>
			</view>
		</scroll-view>
		<view class="appointment-box">
			<view class="appointment-item" v-for="(item,index) in dataList" :key="index" @tap="goPage('/pages/appointment/appointmentDetails?id='+item.id)">
				<view class="top-box flexWrapNo">
					<view class="left-box flexWrapNo">
						<view class="head-box">
							<image :src="item.a_avatar" v-if="item.a_avatar"></image>
							<image src="../../static/appointment/person-icon.png" v-else></image>
						</view>
						<view class="name-lable">{{item.a_nickname||""}}</view>
					</view>
					<view class="vs-box flexWarpCenterColumn">
						<image src="../../static/appointment/vs-icon.png" class="vs-icon"></image>
						<view class="vs-status" :class="{green:item.appointment_status==10,blue:item.appointment_status>=25,grey:item.appointment_status==20}">
							<block v-if="item.appointment_status==1||item.appointment_status==0">待应约</block>
							<block v-if="item.appointment_status==10">已约成</block>
							<block v-if="item.appointment_status==15">爽约</block>
							<block v-if="item.appointment_status==20">未约成</block>
							<block v-if="item.appointment_status==25">开台中</block>
							<block v-if="item.appointment_status==30">确认比分</block>
							<block v-if="item.appointment_status==40">已完成</block>
							<block v-if="item.appointment_status==45">已取消</block>
						</view>
					</view>
					<view class="right-box flexWrapNo">
						<view class="name-lable">{{item.b_nickname||""}}</view>
						<view class="head-box">
							<image :src="item.b_avatar" v-if="item.b_avatar"></image>
							<image src="../../static/appointment/person-icon.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="bottom-box">
					<view class="info-box flexWrap">
						<view class="info-left">
							<view class="shop-info-box flexWrapNo">
								<image src="../../static/appointment/addres-icon.png" class="address-icon"></image>
								<text style="flex: none;">{{item.shop_name}}</text>
								<text class="distance-lable">距我{{item.distance}}km</text>
							</view>
							<view class="time-box flexWrapNo">
								<image src="../../static/appointment/time-icon.png" class="time-icon"></image>
								{{item.selected_time}}
							</view>
						</view>
					</view>
					<view class="chat-box flexWrapNo">
						<image src="../../static/appointment/chat-icon.png" class="chat-icon"></image>
						<view class="chat-info">
							<view class="chat-text">{{item.leave_message}}</view>
							<view class="lable-box flexWrapNo">
								<view class="lable-item" v-for="(k,i) in item.label">{{k}}</view>
							</view>
						</view>
					</view>
					<view class="appointment-btn" v-if="item.appointment_status==25||item.appointment_status==40" @tap.stop="goPage('/pages/appointment/score?id='+item.id)">
						比分
					</view>
					<view class="btn-box flexWrapNo">
						<block v-if="item.appointment_status==0||item.appointment_status==1||item.appointment_status==10">
							<view class="btn"  @tap.stop="cancelAppointment(index,item.id)">
								取消订单
							</view>
							<view class="btn solid flexWrapNo"  @tap.stop="goPage('/pages/appointment/addAppoint?id='+item.id)">
								<image src="../../static/appointment/edit-icon.png" class="edit-icon"></image>
								修改
							</view>
							<view class="btn solid flexWrapNo" @tap.stop="jump(item.id)">
								<image src="../../static/appointment/share-icon.png" class="share-icon"></image>
								分享
							</view>
						</block>
						<view class="btn">查看</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
			<view class="empty-box flexWarpCenterColumn" v-if="showEmpty">
				<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png" class="empty-image"></image>
			</view>
		</view>
		<view class="make-btn flexWarpCenterColumn" @tap="goPage('/pages/appointment/addAppoint')">
			<text>发起</text>
			<text>约球</text>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				currmentIndex:0,
				navList:[
					{
						name:'全部',
						status:0
					},
					{
						name:'待应约',
						status:1
					},
					{
						name:'已约成',
						status:10
					},
					{
						name:'已取消',
						status:45
					},
					{
						name:'开台中',
						status:25
					},
					{
						name:'确认比分',
						status:30
					},
					{
						name:'已完成',
						status:40
					}
				],
				longitude:"106.540541",
				latitude:"29.590991",
				dataList:[],
				//下拉刷新
				page: 1,
				size:10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
			};
		},
		// 触底刷新
		onReachBottom() {
			if (this.more) {
				this.getData()
			}
		},
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onLoad() {
			this.getLocation();
		},
		methods:{
			jump(id){
				wx.navigateToMiniProgram({
				  appId: 'wx3942f22f0e5b4bba',
				  path: '/pages/appointment/appointmentDetails?id='+id,
				  extraData: {
				    foo: 'bar'
				  },
				  envVersion: 'release',
				  success(res) {
				    // 打开成功
					console.log(res)
				  },
				  fail(err) {
				  	console.log(err)
				  }
				})
			},
			changeNav(index){
				this.currmentIndex=index
				this.freshList();
			},
			cancelAppointment(index,id){
				uni.showModal({
					title:'提示',
					content:"是否确认取消约球",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.cancelAppointment, {
								id:id
							}, {
								token: true
							}).then(res => {
								let {
									data = {}
								} = res;
								if (res.code == 1) {
									this.$tools.showToast('操作成功')
									setTimeout(()=>{
										this.freshList();
									},1000)
								}
							})
						}
					}
				})
			},
			// 获取经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res)
						that.longitude=res.longitude
						that.latitude=res.latitude
						uni.setStorageSync('longitude',that.longitude)
						uni.setStorageSync('latitude',that.latitude)
						that.getData();
					},
					fail(res) {
						that.$tools.showToast('请打开GPS后下拉刷新')
					}
				});
			},
			// 刷新列表
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.dataList = []
				this.getData();
			},
			getData(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$request.post(this.$api.appointmentList, {
					page:this.page++,
					num:this.size,
					longitude: this.longitude,
					latitude:this.latitude,
					appointment_status:this.navList[this.currmentIndex].status,
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray =data
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.dataList=this.dataList.concat(newArray);
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 32upx;
	}
	.change-box{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 233upx;
		background: rgba(0,0,0,0.06);
		border: 2px solid rgba(255,255,255,0.251);
		border-radius: 63upx;
		justify-content: center;
		position: fixed;
		z-index: 999;
		.change-icon{
			width: 36upx;
			height: 36upx;
			margin-left: 24upx;
		}
	}
	.nav-box{
		.nav-item{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #82819B;
			margin-right: 30upx;
			flex: none;
			.line{
				display: inline-block;
				width: 94rpx;
				height: 4rpx;
				margin-top: 10rpx;
			}
		}
		.active{
			color: #fff;
			.line{
				background: #26BCFD;
			}
		}
	}
	.appointment-box{
		margin-top: 32upx;
		.appointment-item{
			margin-bottom: 20upx;
			.top-box{
				background: linear-gradient(141deg, #8D2639 0%, #121EAF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 30upx 28upx 30upx 28upx;
				.left-box{
					.head-box{
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						border: 2rpx solid #FFFFFF;
						margin-right: -42upx;
						z-index: 9;
						overflow: hidden;
					}
					.name-lable{
						width: 173rpx;
						height: 56rpx;
						padding-left: 54upx;
						// background: linear-gradient(90deg, #EB564F 0%, #7C2C78 100%);
						background: url('../../static/appointment/leftBg.png') no-repeat center /100% 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
						@include ellipsis(1);
					}
				}
				.vs-box{
					.vs-icon{
						width: 112upx;
						height: 112upx;
					}
					.vs-status{
						width: 108rpx;
						height: 40rpx;
						line-height: 40upx;
						text-align: center;
						background: #772622;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						border: 2rpx solid #EB564F;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: -25upx;
					}
					.grey{
						color: #5250AA;
						background: #19185E;
						border: 2rpx solid #5250AA;
					}
					.green{
						background: #1C573B;
						border: 2rpx solid #53A33A;
					}
					.blue{
						background: #2263AC;
						border: 2rpx solid #0AD2E6;
					}
				}
				.right-box{
					.head-box{
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						border: 2rpx solid #FFFFFF;
						margin-left: -42upx;
						z-index: 9;
						overflow: hidden;
					}
					.name-lable{
						width: 173rpx;
						height: 56rpx;
						padding-right: 54upx;
						// background: linear-gradient(265deg, #5BB9F7 0%, #4140B5 100%);
						background: url('../../static/appointment/rightBg.png') no-repeat center /100% 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: right;
						@include ellipsis(1);
					}
				}
			}
			.bottom-box{
				margin-top: 4upx;
				padding: 38upx 28upx;
				background: #1A195F;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				position: relative;
				.appointment-btn{
					width: 168rpx;
					height: 68rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #26BCFD;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #26BCFD;
					line-height: 68rpx;
					text-align: center;
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					right: 28upx;
				}
				.shop-info-box{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6E6E9A;
					line-height: 36rpx;
					flex: none;
					.address-icon{
						width: 30upx;
						height: 36upx;
						margin-right: 22upx;
						flex: none;
					}
					.distance-lable{
						height: 44rpx;
						line-height: 44rpx;
						padding: 0 18upx;
						background: #312F80;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #8F8EBA;
						display: inline-block;
						margin-left: 12upx;
						flex: none;
					}
				}
				.time-box{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6E6E9A;
					line-height: 36rpx;
					margin-top: 12upx;
					.time-icon{
						width: 32upx;
						height: 32upx;
						margin-right: 20upx;
					}
				}
				.chat-box{
					margin-top: 28upx;
					align-items: start;
					.chat-icon{
						width: 40upx;
						height: 40upx;
						flex: none;
					}
					.chat-info{
						margin-left: 12upx;
						.chat-text{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 36rpx;
							margin-bottom: 16upx;
						}
						.lable-box{
							flex-wrap: wrap;
							.lable-item{
								height: 44rpx;
								border-radius: 26rpx 26rpx 26rpx 26rpx;
								border: 2rpx solid #8C8CAF;
								padding: 0 20upx;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C8CAF;
								line-height: 44rpx;
								margin-right: 12upx;
								margin-bottom: 20upx;
							}
						}
					}
				}
				.btn-box{
					border-top: 2rpx solid #312F80;
					margin-top: 34upx;
					padding-top: 32upx;
					justify-content: flex-end;
					.btn{
						width: 194rpx;
						height: 68rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #26BCFD;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26BCFD;
						line-height: 68rpx;
						text-align: center;
						margin-left: 24upx;
						&:nth-of-type(1){
							margin-left: 0;
						}
						.edit-icon{
							width: 26upx;
							height: 26upx;
							margin-right: 12upx;
						}
						.share-icon{
							width: 26upx;
							height: 24upx;
							margin-right: 12upx;
						}
					}
					.solid{
						background: #26BCFD;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #26BCFD;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						justify-content: center;
					}
				}
			}
		}
	}
	.make-btn{
		width: 190rpx;
		height: 147rpx;
		line-height: 38rpx;
		text-align: center;
		justify-content: center;
		background: url('../../static/appointment/make-img.png') no-repeat center/100% 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding-bottom: 42rpx;
		position: fixed;
		right: 32upx;
		bottom: 56upx;
		z-index: 9;
	}
</style>
